<template>
  <main class="m-3 rounded-md p-5 shadow-2xl ring-slate-900/5">
    <h1 class="text-center text-lg text-violet-400">Hello world</h1>
    <div class="my-4 h-10 w-full rounded-md border-2 border-violet-600 bg-violet-100 p-2">
      <p class="text-center font-mono text-lg">A DIV</p>
    </div>

    <!-- 固定 -->
    <div class="fixed top-5 h-10 w-10 bg-violet-600 text-center text-[10px] text-cyan-50">固定的</div>

    <!-- flex布局 start-->
    <div class="flex flex-row justify-between">
      <div class="h-10 w-10 rounded-full bg-violet-300"></div>
      <div class="h-10 w-10 rounded-full bg-violet-300"></div>
      <div class="h-10 w-10 rounded-full bg-violet-300"></div>
      <div class="h-10 w-10 rounded-full bg-violet-300"></div>
      <div class="h-10 w-10 rounded-full bg-violet-300"></div>
    </div>
    <!-- flex布局 end -->
    <!-- grid布局 start -->
    <div class="grid grid-cols-3">
      <div class="m-2 h-10 bg-violet-300"></div>
      <div class="m-2 h-10 bg-violet-300"></div>
      <div class="m-2 h-10 bg-violet-300"></div>
      <div class="m-2 h-10 bg-violet-300"></div>
      <div class="m-2 h-10 bg-violet-300"></div>
    </div>
    <!-- grid布局 end -->

    <!-- 媒体查询 屏幕大于768px-->
    <div class="hidden md:block">屏幕<span class="text-lg text-red-600">大</span>于768px会显示</div>

    <!-- 媒体查询 屏幕小于768px -->
    <div class="hidden max-md:block">屏幕<span class="text-lg text-red-600">小</span>于768px会显示</div>

    <!-- 鼠标效果 -->
    <button class="] h-10 w-[100px] rounded-xl bg-violet-600 text-white hover:bg-violet-900 focus:bg-violet-900 focus:outline-none focus:ring focus:ring-violet-800">点击我</button>

    <!-- 列表 -->
    <div>
      <ul class="my-2 space-y-2 py-2">
        <li class="bg-violet-50 first:bg-yellow-100">item 1</li>
        <li class="bg-violet-50 first:bg-yellow-100 odd:bg-green-300 even:bg-violet-300">item 2</li>
        <li class="bg-violet-50 first:bg-yellow-100 odd:bg-green-300 even:bg-violet-300">item 3</li>
        <li class="bg-violet-50 first:bg-yellow-100 odd:bg-green-300 even:bg-violet-300">item 4</li>
        <li class="bg-violet-50 first:bg-yellow-100 odd:bg-green-300 even:bg-violet-300">item 5</li>
      </ul>
    </div>
    <!-- 列表end -->

    <!-- 暗黑模式 -->
    <div class="card">
      <!-- 文本1 -->
      <h3 class="text-base font-medium tracking-tighter text-slate-900 dark:text-white">这是一段长长长长长长长长长长长长长长的文字</h3>
      <!-- 文本2 -->
      <p class="mt-2 text-sm text-slate-500 dark:text-blue-100">这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落</p>
      <!-- 按钮 -->
      <button id="toggleDark" class="font-blue-900 mt-6 rounded-lg bg-blue-100 px-4 py-2 text-sm font-medium dark:bg-white" onclick="document.body.classList.toggle('dark')">切换模式</button>
    </div>
  </main>
</template>
